import "./index.scss";
import why1 from "../../assets/why-1.png";
import why2 from "../../assets/why-2.png";
import why3 from "../../assets/why-3.png";
import why4 from "../../assets/why-4.png";
import result from "../../assets/result.png";

import { Button, Col, Row } from "antd";
import { useRef } from "react";

const imgArray = [why1, why2, why3, why4];

const Page4 = () => {
	const updateHref = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
		const aTag = document.createElement("a");
		aTag.href = "#custom-form-link-target";
		aTag.click();
		// document.body.scrollTop = 617;
	};
	return (
		<div className='alibaba-page-4-container'>
			<div className='page4-title'>
				<span>为什么选择</span>
				<span className='orange'>阿里巴巴国际站</span>
			</div>
			<div className='page-4-img-container'>
				<Row gutter={[7, 7]}>
					{imgArray.map((item) => {
						return (
							<Col span={12} key={item}>
								<img src={item} alt='' className='page-4-img-item' />
							</Col>
						);
					})}
				</Row>
			</div>
			<div className='page-4-bottom-placeholder'></div>
			<div className='page-4-bottom'>
				<Button onClick={updateHref} shape='round' type='primary' className='page-4-bottom-button'>
					<img src={result} className='page-4-bottom-img' />
					开店咨询
				</Button>
			</div>
		</div>
	);
};

export default Page4;
